<template>
	<view v-if='itemObj' class="box-main">

		<!-- 自定义顶部导航栏 -->
		<!-- 	<u-navbar  border title="名片详情">
			<view class="u-nav-slot" slot="left">
				<u-icon @click="toPageHome(1)" color="#000000" name="arrow-left" size="19"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon color="#000000" @click="toPageHome(2)" name="home" size="20"></u-icon>
			</view>
		</u-navbar>
		<view style="height: 100rpx;"></view> -->
		<!-- end -->


		<!-- 导航栏 -->
		<view>
			<!-- 导航栏 -->
			<view id='nav' class="box-tabs box-tabs-fixed">
				<scroll-view scroll-x="true" show-scrollbar="false" class="nav-scroll-view">
					<view class="nav-items-container">
						<view @click="tabsSelect(0)" class="flex ac jc fc pos-r nav-item">
							<view class="box-tabs-txt " :style="{fontSize:current==0?'34rpx':''}">
								<text :style="{color:current==0?'#0808D8':''}">个人</text>
								<text>简介</text>
							</view>
							<view v-if="current == 0" class="indicator-image">
								<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
									style="width: 50rpx;height: 15rpx;" mode="aspectFit">
								</image>
							</view>
						</view>
						<view v-if="mer_id && hostProduct.length > 0 && itemObj.type == 2" @click="tabsSelect(4)"
							class="flex ac jc fc pos-r nav-item">
							<view class="box-tabs-txt " :style="{fontSize:current==4?'34rpx':''}">
								<text :style="{color:current==4?'#0808D8':''}">企业</text>
								<text>商城</text>
							</view>
							<view v-if="current == 4" class="indicator-image">
								<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
									style="width: 50rpx;height: 15rpx;" mode="aspectFit">
								</image>
							</view>
						</view>
						<view v-if="itemObj.company_info || $timer.strToArr(itemObj.company_image).length > 0"
							@click="tabsSelect(2)" class="flex ac jc fc pos-r nav-item">
							<view class="box-tabs-txt " :style="{fontSize:current==2?'34rpx':''}">
								<text :style="{color:current==2?'#0808D8':''}">企业</text>
								<text>简介</text>
							</view>
							<view v-if="current == 2" class="indicator-image">
								<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
									style="width: 50rpx;height: 15rpx;" mode="aspectFit">
								</image>
							</view>
						</view>
						<view
							v-if="itemObj.product_service || $timer.strToArr(itemObj.product_service_image).length > 0"
							@click="tabsSelect(3)" class="flex ac jc fc pos-r nav-item">
							<view class="box-tabs-txt " :style="{fontSize:current==3?'34rpx':''}">
								<text :style="{color:current==3?'#0808D8':''}">产品</text>
								<text>/服务</text>
							</view>
							<view v-if="current == 3" class="indicator-image">
								<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
									style="width: 50rpx;height: 15rpx;" mode="aspectFit">
								</image>
							</view>
						</view>
						<view
							v-if="itemObj.supply || itemObj.demand || $timer.strToArr(itemObj.supply_demand_image).length > 0"
							@click="tabsSelect(1)" class="flex ac jc fc pos-r nav-item">
							<view class="box-tabs-txt " :style="{fontSize:current==1?'34rpx':''}">
								<text :style="{color:current==1?'#0808D8':''}">供需</text>
								<text>信息</text>
							</view>
							<view v-if="current == 1" class="indicator-image">
								<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
									style="width: 50rpx;height: 15rpx;" mode="aspectFit">
								</image>
							</view>
						</view>
						<view v-if="articleList.length > 0 && itemObj.type == 2" @click="tabsSelect(5)"
							class="flex ac jc fc pos-r nav-item">
							<view class="box-tabs-txt " :style="{fontSize:current==5?'34rpx':''}">
								<text :style="{color:current==5?'#0808D8':''}">动态</text>
								<text>/资讯</text>
							</view>
							<view v-if="current == 5" class="indicator-image">
								<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
									style="width: 50rpx;height: 15rpx;" mode="aspectFit">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view :style="{height: (navHeight*2)+'rpx'}"> </view>
			<!-- end -->
		</view>
		<!-- end -->

		<!-- 个人简介 -->
		<view class="mb-20">
			<!-- 名片 -->
			<view class="box-mp shadow-2">

				<!-- 名片类型 -->
				<view v-if="itemObj.type == 2" class="box-bg-img pos-r">
					<view>
						<image class="br-18 shadow-2" style="height: 860rpx;width: 100%;"
							:src="$timer.ensureUrl(itemObj.avatar)" mode="aspectFill"></image>
					</view>

					<view class="box-img-text">
						<view class="fw  fs-34">
							<text class="fw fs-36">{{itemObj.name || '白先国'}} </text>
							<text class="ml-10 mr-10"> / </text>
							<text class="fs-30 "> {{itemObj.position.position|| '董事长'}}</text>
						</view>
						<view v-if="options.mode == 'share' && itemObj.phone" class="mt-10">{{itemObj.phone}}</view>
						<view class="mt-10">
							<text>{{itemObj.position.company_name || ''}}</text>
						</view>
					</view>
				</view>
				<view v-if="itemObj.type == 1" class="box-bg-img-2">
					<view class="box-bg-img-2-left">
						<view class="mb-10 fw box-bg-title" style="font-size: 40rpx;">
							<text>{{itemObj.name || ''}}·{{itemObj.position.position || ''}}</text>
						</view>
						<view style="width: 110%;">
							<text class="fs-26" style="color: #FFD7AC;">{{itemObj.position.company_name || ''}}</text>
						</view>
						<view>
							<view class="mt-40" style="color: white;">
								<text class="iconfont icon-phone_ fs-26"></text>
								<text
									class="fs-26 ml-10">{{$timer.encryptSensitiveInfo(itemObj.phone,'phone') || ''}}</text>
							</view>
							<view v-if="itemObj.wechat" class="mt-10" style="color: white;">
								<text class="iconfont icon-weixin1 fs-26"></text>
								<text
									class="fs-26 ml-10">{{$timer.encryptSensitiveInfo(itemObj.wechat,'wechat') || ''}}</text>
							</view>
							<view v-if="itemObj.position.address" class="mt-10" style="color: white;width: 150%;">
								<text class="iconfont icon-weizhi fs-26"></text>
								<text
									class="fs-26 ml-10">{{(itemObj.position.address+itemObj.position.address_detail) || ''}}</text>
							</view>
						</view>
					</view>
					<view class="box-bg-img-2-right">
						<image mode="aspectFill" :src="itemObj.avatar"
							style="width: 140rpx;height: 140rpx;border-radius: 100%;">
						</image>
					</view>
				</view>

				<view class="p-20 " style="margin-bottom: -20rpx;">

					<view class="flex ac sb " style="width: 100%;">

						<!-- 	<view class="flex ac ">
								<text class="iconfont-yjgs fs-46 " style="color: #D22C25;">
									&#xe604;
								</text>
								<text class="fs-32 ">{{itemObj.pv || 0}}</text>
							</view> -->

						<button open-type="share" hover-class="none" class="protoButton">
							<view class="flex ac ">
								<text class="iconfont-yjgs  fs-46">
									&#xe68c;
								</text>
								<text class="fs-28 fw ml-5">分享</text>
							</view>
						</button>

						<view @click="collectionClick('收藏')" v-if="itemObj.collect == 2" class="flex ac ">
							<text class="iconfont-yjgs  fs-40">
								&#xe8b9;
							</text>
							<text class="fs-32 ml-5">{{itemObj.follow_num || 0}}</text>
						</view>
						<view @click="collectionClick('已收藏')" v-else class="flex ac ">
							<text class="iconfont-yjgs fs-40" style="color: #FBC11A;">
								&#xe870;
							</text>
							<text class="fs-32 ml-5">{{itemObj.follow_num || 0}}</text>
						</view>

						<view class="pos-r flex ac" style="top: 5rpx;">
							<view v-if="viewUserList.length > 0" class="avatar-stack-container">
								<view class="visit-tooltip" v-if="showVisitTooltip && day_total > 0">
									<text class="fs-24">今日访问</text>
									<text class="fs-32">+{{day_total || 0}}</text>
								</view>
								<navigator hover-class="none"
									:url="'/pages/extend/connection/card_user_list?id='+itemObj.id+'&sumNum='+itemObj.pv +'&dayNum='+day_total">
									<view class="avatar-stack">
										<image v-for="(item, index) in viewUserList" :key="index" :src="item.avatar"
											:style="{zIndex: 5-index}" class="stacked-avatar" mode="aspectFill">
										</image>
									</view>
								</navigator>
							</view>
							<view v-else>
								<text class="iconfont-yjgs fs-46 " style="color: #D22C25;">
									&#xe604;
								</text>
							</view>
							<view class="fs-24 c-666">
								{{itemObj.pv || 0}}次浏览
							</view>
						</view>

					</view>

				</view>

			</view>
			<!-- end -->

			<!-- 个人简介描述 -->
			<view id="id0" class="box-title-txt ml-20">
				<text style="color: #0808D8;">个人</text>
				<text>简介</text>
			</view>
			<view class="shadow-2 box-miaos ls-2 p-20">
				<view class="flex ww">
					<view style="width: 60%;" class="mb-20">
						<text class="iconfont-yjgs">
							&#xe6d0;
						</text>
						<text class="fs-28 ml-5 c-666">籍贯城市</text>
						<text class="fs-28 ml-10 c-999">{{itemObj.old_home || '无'}}</text>
					</view>
					<view style="width: 40%;" class="mb-20">
						<text class="iconfont-yjgs">
							&#xe6ca;
						</text>
						<text class="fs-28 ml-5 c-666">现居</text>
						<text class="fs-28 ml-10 c-999">{{itemObj.resident_address || '未知'}}</text>
					</view>
					<view style="width: 60%;" class="mb-20">
						<text class="iconfont-yjgs">
							&#xe6da;
						</text>
						<text class="fs-28 ml-5 c-666">毕业院校</text>
						<text class="fs-28 ml-10 c-999">{{itemObj.school || '未知'}}</text>
					</view>
					<view style="width: 40%;" class="mb-20">
						<text class="iconfont-yjgs">
							&#xe6ef;
						</text>
						<text class="fs-28 ml-5 c-666">学历</text>
						<text class="fs-28 ml-10 c-999">{{itemObj.max_edu || '未知'}}</text>
					</view>
					<view style="width: 60%;" class="mb-20">
						<text class="iconfont-yjgs">
							&#xe6e0;
						</text>
						<text class="fs-28 ml-5 c-666">职业标签</text>
						<text class="fs-28 ml-10 c-999">{{itemObj.Occupation || '未知'}}</text>
					</view>
					<view style="width: 40%;" class="mb-20 flex ac">
						<view>
							<text class="iconfont-yjgs">
								&#xe6d7;
							</text>
						</view>
						<view class="flex ac">
							<view>
								<text class="fs-28 ml-5 c-666">认证</text>
							</view>
							<view v-if="itemObj.is_real == 1" class="ml-20 pos-r" style="top: 5rpx;">
								<image mode="widthFix" style="width: 100rpx;height: 40rpx;"
									src="https://yjgs.jsonbug.com/test/realAuth.png">
								</image>
							</view>
							<view v-if="[2,4].includes(itemObj.is_real)" class="ml-20 ">
								<text class="iconfont-yjgs fs-40">
									&#xe6eb;
								</text>
							</view>
							<view v-if="itemObj.is_real == 3" class="ml-20 ">
								<image mode="widthFix" style="width: 120rpx;height: 40rpx;"
									src="https://yjgs.jsonbug.com/test/realauthing.png">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view v-if="itemObj.social_duties" style="width: 100%;" class="mb-20">
					<text class="iconfont-yjgs fs-30">
						&#xe605;
					</text>
					<text class="fs-28 ml-5 c-666">社会职务</text>
					<text class="fs-28 ml-10 c-999">{{itemObj.social_duties || '未知'}}</text>
				</view>
				<view v-if='itemObj.label' style="width: 100%;" class="mb-20">
					<text class="iconfont-yjgs">
						&#xe6ec;
					</text>
					<text class="fs-28 ml-5 c-666">兴趣爱好</text>
					<text class="fs-28 ml-10 c-999">{{itemObj.label || '未知'}}</text>
				</view>
				<view style="width: 100%;" class="mb-20 mr-20">
					<text class="iconfont-yjgs">
						&#xe6cf;
					</text>
					<text class="fs-28 ml-5 c-666">公司地址</text>
					<text
						class="fs-28 ml-10 c-999">{{(itemObj.position.address+itemObj.position.address_detail) || '未知'}}</text>
				</view>
			</view>
			<!-- end -->

			<!-- 甄选商品 -->
			<block v-if="itemObj.type == 2 && mer_id && hostProduct.length > 0">
				<view id="id4" class="box-title-txt ml-20">
					<text style="color: #0808D8;">企业</text>
					<text>商城</text>
				</view>
				<view style="height: 20rpx;"></view>
				<recommend :hostProduct="hostProduct" :indexP="false" :isLogin="false" :isShowRecommend="false">
				</recommend>
				<view v-if="itemObj.is_diy == 1" @click="toPageSonShop" class="wfc mlr ">
					<image src="https://yjgs.jsonbug.com/test/click1_to.png" mode="widthFix"></image>
				</view>
			</block>
			<!-- end -->

		</view>
		<!-- end -->


		<!-- 企业简介 -->
		<block v-if="itemObj.company_info || $timer.strToArr(itemObj.company_image).length > 0">
			<view id="id2" class="box-title-txt ml-20 ">
				<text style="color: #0808D8;">企业</text>
				<text>简介</text>
			</view>
			<view class="box-intro">
				<block v-if="itemObj.type == 2">
					<view style="word-wrap: break-word;">
						{{itemObj.company_info || ''}}
					</view>
					<view @click="previewImg($timer.strToArr(itemObj.company_image),index)"
						v-for="(item,index) in $timer.strToArr(itemObj.company_image)" :key="index" class="mt-15">
						<img :src="item" style="width: 100%;" mode="widthFix"></img>
					</view>

					<emptyPage top="0" v-if="!itemObj.company_info && !itemObj.company_image" title="暂无数据"
						style="margin-top: 0rpx;margin-bottom: 20rpx;">
					</emptyPage>
				</block>

				<block v-if="itemObj.type == 1">
					<emptyPage :top="0" title="商务版专享" style="margin-top: 0rpx;margin-bottom: 20rpx;">
					</emptyPage>
				</block>
			</view>
		</block>
		<!-- end -->


		<!-- 产品 -->
		<block v-if="itemObj.product_service || $timer.strToArr(itemObj.product_service_image).length > 0">
			<view id="id3" class="box-title-txt ml-20 ">
				<text style="color: #0808D8;">产品</text>
				<text>/服务</text>
			</view>
			<view class="box-intro">
				<block v-if="itemObj.type == 2">
					<view style="word-wrap: break-word;">
						{{itemObj.product_service || ''}}
					</view>
					<view @click="previewImg($timer.strToArr(itemObj.product_service_image),index)"
						v-for="(item,index) in $timer.strToArr(itemObj.product_service_image)" :key="index"
						class="mt-15">
						<img :src="item" style="width: 100%;" mode="widthFix"></img>
					</view>

					<emptyPage top="0" v-if="!itemObj.product_service && !itemObj.product_service_image" title="暂无数据"
						style="margin-top: 0rpx;margin-bottom: 20rpx;">
					</emptyPage>
				</block>

				<block v-if="itemObj.type == 1">
					<!-- 空数据站位 -->
					<emptyPage :top="0" title="商务版专享" style="margin-top: 0rpx;margin-bottom: 20rpx;">
					</emptyPage>
					<!-- end -->
				</block>
			</view>
		</block>
		<!-- end -->

		<!-- 供需信息 -->
		<block v-if="itemObj.supply || itemObj.demand || $timer.strToArr(itemObj.supply_demand_image).length > 0">
			<view id="id1" class="box-title-txt ml-20 ">
				<text style="color: #0808D8;">供需</text>
				<text>信息</text>
			</view>
			<view class="box-intro">
				<block v-if="itemObj.type == 2">
					<view v-if="itemObj.supply">
						<text style="font-weight: bold;color: black;font-size: 36rpx;">
							一、我能提供的资源
						</text>
						<view class="mt-10 mb-10"></view>
						<text>
							{{itemObj.supply || ''}}
						</text>
					</view>
					<view v-if="itemObj.demand" class="mt-20">
						<text style="font-weight: bold;color: black;font-size: 36rpx;">
							二、我需要的资源
						</text>
						<view class="mt-10 mb-10"></view>
						<text>
							{{itemObj.demand || ''}}
						</text>
					</view>
					<view @click="previewImg($timer.strToArr(itemObj.supply_demand_image),index)"
						v-for="(item,index) in $timer.strToArr(itemObj.supply_demand_image)" :key="index" class="mt-15">
						<img :src="item" style="width: 100%;" mode="widthFix"></img>
					</view>

					<emptyPage top="0" v-if="!itemObj.supply && !itemObj.demand && !itemObj.supply_demand_image"
						title="暂无数据" style="margin-top: 0rpx;margin-bottom: 20rpx;">
					</emptyPage>
				</block>

				<block v-if="itemObj.type == 1">
					<!-- 空数据站位 -->
					<emptyPage :top="0" title="商务版专享" style="margin-top: 0rpx;margin-bottom: 20rpx;">
					</emptyPage>
					<!-- end -->
				</block>
			</view>
		</block>
		<!-- end -->


		<block v-if="articleList.length > 0 && itemObj.type == 2">
			<view id="id5" class="box-title-txt ml-20 ">
				<text style="color: #0808D8;">动态</text>
				<text>/资讯</text>
			</view>
			<view class="box-intro">
				<block>
					<view v-for="(item, index) in articleList" :key="index" class="news-item"
						@click="toNewsDetail(item)">
						<view class="news-content">
							<image class="news-cover" :src="$timer.ensureUrl(item.cover)" mode="aspectFill"></image>
							<view class="news-info">
								<view class="news-title">
									{{item.title || ''}}
								</view>
								<!-- <view class="news-desc">{{item.content || ''}}</view> -->
								<view class="news-footer">
									<view class="news-label">{{item.label || ''}}</view>
									<view class="news-time">{{item.create_time || ''}}</view>
								</view>
								<view v-if="item.status == 3" class="c-red fs-24 mt-10">驳回原因：{{item.remark || ''}}
								</view>
							</view>
						</view>
					</view>
				</block>

				<block v-if="articleList.length == 0">
					<!-- 空数据站位 -->
					<emptyPage :top="0" title="商务版专享" style="margin-top: 0rpx;margin-bottom: 20rpx;">
					</emptyPage>
					<!-- end -->
				</block>
			</view>
		</block>


		<!-- 导航栏 -->
		<view v-if="itemObj.uid != uid" class="box-tabber shadow-2">
			<view @click="callClick('打电话')" class="flex ac fc jc">
				<text :style="{'color':itemObj.phone ? '' : '#C6C9C4'}" class="iconfont icon-dianhau fs-40"></text>
				<text class="fs-24 mt-5">打电话</text>
			</view>
			<view @click="callClick('加微信')" class="flex ac fc jc">
				<text class="iconfont icon-weixin1 fs-40"
					:style="{'color':itemObj.is_share == 1 ? itemObj.wechat ? '' : '#C6C9C4' : '' }"></text>
				<text class="fs-24 mt-5">加微信</text>
			</view>

			<view v-if="[2,3].includes(itemObj.is_share)" @click="exchangeClick" class="box-tabber-c">
				<text>交换名片</text>
			</view>
			<view v-else style="background-color: #999;" class="box-tabber-c">
				<text>已交换</text>
			</view>
			<view @click="tabsClick('存入手机')" class="flex ac fc jc">
				<text class="iconfont-yjgs fs-40">
					&#xe628;
				</text>
				<text class="fs-24 mt-5">存入手机</text>
			</view>
			<button open-type="share" hover-class="none" class="protoButton">
				<view class="flex ac fc jc">
					<text class="iconfont-yjgs c-333" style="font-size: 46rpx;">
						&#xe63e;
					</text>
					<text class="fs-24 mt-5">分享</text>
				</view>
			</button>
		</view>
		<!-- end -->


		<!-- 自己名片导航 -->
		<view v-if="itemObj.uid == uid && [1,3].includes(itemObj.status)" class="box-tabber shadow-2"
			style="height: 100rpx;max-width: 60%;">
			<view @click="toCreateMpPage" class="flex ac fc jc w-80 tc">
				<text class="iconfont-yjgs  fs-46">
					&#x10100;
				</text>
				<text class="fs-24 mt-5">编辑</text>
			</view>

			<!-- 会员专享 -->
			<view v-if="itemObj.type == 2 " @click="tabsClick('名片卡')" class="flex ac fc jc " style="width: 82%">
				<text class="iconfont-yjgs fs-46">
					&#xe65d;
				</text>
				<text class="fs-24 mt-5">名片图片</text>
			</view>
			<!-- end -->

			<button open-type="share" hover-class="none" class="protoButton w-80">
				<view class="flex ac fc jc">
					<text class="iconfont-yjgs c-333 fs-46">
						&#xe606;
					</text>
					<text class="fs-24 mt-5">转发</text>
				</view>
			</button>
		</view>
		<!-- end -->


		<!-- 创建数字名片 -->
		<view v-if="itemObj.uid != uid" @click="toCreateMpPage" class="box-create shadow-2" style="z-index: 999;">
			<text class="iconfont-yjgs">
				&#xe674;
			</text>
			<text class="ml-10 pos-r" style="top: -2rpx;">创建专属名片</text>
		</view>
		<!-- end -->

		<!-- 升级成会客厅 -->
		<view v-if="cardUid && [327678,327679].includes(uid)" @click="plusHKT" class="box-create shadow-2"
			style="z-index: 999;bottom: 320rpx;background-color: #060D10;width: 200rpx;">
			<text class="ml-10 pos-r" style="top: -2rpx;">升级成会客厅</text>
		</view>
		<!-- end -->

		<!-- 交换名片弹窗 -->
		<uni-popup ref="exchangePopupRef" type="center">
			<view class="exchangePopupRef flex ac jc fc">
				<view class="mt-10">
					<image src="https://yjgs.jsonbug.com/storage/default/20241023/jiaohmp.png" mode="aspectFill"
						style="width: 509rpx;height: 396rpx;"></image>
				</view>
				<view class="flex ac jc fc">
					<view>
						<text class="fw fs-46">暂未交换名片</text>
					</view>
					<view class="mt-40">
						<text class=" fs-32" style="color: #000;">交换完成后，方可联系对方～</text>
						<view class="mt-20 tc">
							<text class="c-999 fs-26">遇见贵商，互助互帮</text>
						</view>
					</view>
					<view @click="exchangeClick" class="box-card-jiaoh ">
						<text>交换名片</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- end -->

		<!-- 创建名片弹窗 -->
		<uni-popup ref="createPopupRef" type="center">
			<view class="exchangePopupRef flex ac jc fc" style="height: 600rpx;">
				<view>
					<image src="/static/images/empty-box.png" mode="aspectFill" style="width: 250rpx;height: 250rpx;">
					</image>
				</view>
				<view class="flex ac jc fc">
					<view class="mt-20">
						<text class="fw fs-40">暂未创建名片</text>
					</view>
					<view class="mt-20">
						<text class=" fs-32" style="color: #666666;"> 创建后交换名片，方可联系对方～</text>
					</view>
					<view @click="toCreateMpPage" class="box-card-jiaoh">
						<text>创建专属名片</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- end -->

		<!-- 绘制海报 -->
		<l-painter @progress='painterProgress' v-if="isCanvasToTempFilePath" isCanvasToTempFilePath
			@success="painterSuccess" hidden css="width: 750rpx;">
			<l-painter-view css="background-color: white;width: 100%;height: 1410rpx;border-radius: 16rpx;">

				<l-painter-image :src="itemObj.avatar"
					css="height: 900rpx;width: 100%;border-radius:20rpx;object-fit: cover;box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1)" />

				<l-painter-view
					css="width: 100%;height: 140rpx;position: relative;margin-top: -140rpx;margin-bottom: 20rpx;">

					<l-painter-view>
						<l-painter-text :text="itemObj.name"
							css="font-size: 40rpx;color: white;font-weight: bold;margin-left: 40rpx;" />
						<l-painter-text text="/"
							css="font-size: 40rpx;color: white;font-weight: bold;margin-left: 10rpx;" />
						<l-painter-text :text="itemObj.position.position"
							css="font-size: 32rpx;color: white;font-weight: bold;margin-left: 10rpx;margin-top:10rpx" />
					</l-painter-view>

					<l-painter-view css="width: 90%;">
						<l-painter-text :text="itemObj.position.company_name"
							css="line-clamp:1;font-size: 32rpx;color: white;margin-left: 40rpx;margin-top:10rpx;font-weight: bold;" />
					</l-painter-view>

				</l-painter-view>

				<l-painter-view css="padding-left: 20rpx;padding-bottom: 20rpx;padding-top: 10rpx;">
					<l-painter-text :text="'籍贯:'+(itemObj.old_home || '未知')"
						css="padding-left: 16rpx;padding-right: 16rpx;margin-right: 20rpx;font-size: 24rpx;color: #666666; background: #EBEBEB;padding-top: 6rpx;padding-bottom: 6rpx;border-radius:6rpx;" />
					<l-painter-text v-if="itemObj.school" :text="itemObj.school"
						css="margin-bottom: 12rpx;;padding-top: 6rpx;padding-bottom: 6rpx;padding-left: 16rpx;padding-right: 16rpx;margin-right: 20rpx;font-size: 24rpx;color: #666666; background: #EBEBEB;border-radius:6rpx;" />

					<l-painter-text v-if="itemObj.Occupation" :text="itemObj.Occupation"
						css="font-size: 24rpx;color: #666666; background: #EBEBEB;padding-top: 6rpx;padding-bottom: 6rpx;padding-left: 16rpx;padding-right: 16rpx;border-radius:6rpx;" />

					<l-painter-text v-else :text="itemObj.position.industry"
						css="font-size: 24rpx;color: #666666; background: #EBEBEB;padding-top: 6rpx;padding-bottom: 6rpx;padding-left: 16rpx;padding-right: 16rpx;border-radius:6rpx;" />

				</l-painter-view>

				<l-painter-view>
					<l-painter-view css="margin-left: 20rpx;margin-top: 10rpx;">
						<l-painter-image css="height: 32rpx;width: 32rpx;margin-right: 16rpx;"
							src="https://yjgs.jsonbug.com/storage/default/20241023/shilimobile.png">
						</l-painter-image>
						<l-painter-text :text="itemObj.phone" css="color:#666666;" />
					</l-painter-view>

					<l-painter-view v-if='itemObj.wechat' css="margin-left: 20rpx;margin-top: 20rpx;">
						<l-painter-image css="height: 30rpx;width: 30rpx;margin-right: 20rpx;"
							src="https://yjgs.jsonbug.com/storage/default/20241021/shliewx.png">
						</l-painter-image>
						<l-painter-text :text="itemObj.wechat" css="color:#666666;" />
					</l-painter-view>

					<l-painter-view
						css="width: 90%;margin-left: 20rpx;margin-top: 20rpx;display: flex;align-items: center;">
						<l-painter-image css="height: 30rpx;width: 30rpx;margin-right: 20rpx;"
							src="https://yjgs.jsonbug.com/storage/default/20241023/shlie.png">
						</l-painter-image>
						<l-painter-text :text="(itemObj.position.address+itemObj.position.address_detail)  || ''"
							css="color:#666666;line-clamp:1" />
					</l-painter-view>
				</l-painter-view>

				<l-painter-view
					css="width: 90%;height: 2rpx;background-color:#EBEBEB ;margin-right: auto;margin-left: auto;margin-top: 30rpx;"></l-painter-view>

				<l-painter-view
					css="display: flex;align-items: center;margin-top: 30rpx;margin-left:20rpx;justify-content: space-between;">
					<l-painter-text text="长按右侧二维码，查看更多名片信息" css="color: #3D3D3D;font-size: 30rpx;font-weight:bold;" />
					<l-painter-qrcode css="height: 150rpx;width: 150rpx;margin-right:40rpx"
						:text="'https://www.yujianguishang.com/card?uid='+uid + '&id='+itemObj.id+'&mode=share'"></l-painter-qrcode>
				</l-painter-view>

			</l-painter-view>
		</l-painter>
		<!-- end -->

		<!-- 名片海报 -->
		<uni-popup ref="cardPopupRef" type="center">
			<view @click="closePopupImage" class="wfc mla mb-10">
				<text class="iconfont icon-guanbi1 " style="font-size: 60rpx;"></text>
			</view>
			<view class="box-card-pop">
				<image :src="placardImg" mode="widthFix"></image>
			</view>
			<view @click="dowCard" class="wfc pos-r mlr box-card-saveBtn">
				<text>下载名片</text>
			</view>
		</uni-popup>
		<!-- end -->

		<view class="mlr wfc fw">
			分享给身边朋友，一起链接更多贵商
		</view>

		<view style="height: 180rpx;"></view>

	</view>
</template>

<script>
	import {
		getProductHot,
	} from '@/api/store.js';
	import recommend from '@/pages/extend/components/recommend';
	import lPainter from '@/pages/extend/components/lime-painter/components/l-painter/l-painter.vue';
	import lPainterView from '@/pages/extend/components/lime-painter/components/l-painter-view/l-painter-view.vue';
	import lPainterText from '@/pages/extend/components/lime-painter/components/l-painter-text/l-painter-text.vue';
	import lPainterImage from '@/pages/extend/components/lime-painter/components/l-painter-image/l-painter-image.vue';
	import lPainterQrcode from '@/pages/extend/components/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue';
	import emptyPage from '@/pages/extend/components/emptyPage.vue';
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		cardDetail,
		cardRelationCreate,
		cardRelationDelete,
		UserArticleGetList,
		getRecordList,
		cardBecomeService
	} from '@/api/extend.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			recommend,
			"jyf-parser": parser,
			emptyPage,
			lPainter,
			lPainterView,
			lPainterText,
			lPainterImage,
			lPainterQrcode
		},
		data() {
			return {
				cardUid: '',
				page: {
					current_page: 1,
					total: 16
				},
				status: 'loading', // more loading noMore
				articleList: [],
				mer_id: 0,
				hostProduct: [],
				isCanvasToTempFilePath: false,
				placardImg: '',
				navHeight: 0, //导航栏高度
				isMycard: false, // 是否创建了自己的名片
				itemObj: {
					position: {}
				},
				options: {},
				current: 0,
				tabList: [{
						key: '1',
						value: '个人简介'
					},
					{
						key: '4',
						value: '供需信息'
					},
					{
						key: '2',
						value: '企业简介'
					},
					{
						key: '3',
						value: '产品/服务'
					}
				],
				hobby: [],
				viewUserList: [], // 用于存储查看用户的列表
				showVisitTooltip: false,
				day_total: 0, // 今日访问人数
			}
		},
		onLoad(options) {

			this.options = options;
			if (options.q) {
				let params = this.$timer.getQueryParams(decodeURIComponent(options.q));
				this.options.mode = params.mode;
				this.options.id = params.id;
			}

			this.getRecordListFunc();

			if (options.mode == 'preview') {
				this.preViewData();
				return
			}

			if (this.options.id) {
				this.cardDetailFunc(this.options.id);
			}
			uni.$on('send_apply_refer', () => {
				if (this.options.id) {
					this.cardDetailFunc(this.options.id);
				}
				this.$refs.exchangePopupRef.close();
			})

			uni.$once('loginTrigger', () => {
				if (this.options.id) {
					this.cardDetailFunc(this.options.id);
				}
			})

			// 查询一下自己是否创建了名片
			let cardInfo = uni.getStorageSync('myCardInfo');
			if (cardInfo && cardInfo.is_card) {
				this.isMycard = true;
			} else {
				this.cardDetailFunc();
			}

		},
		onReady() {
			// #ifdef MP-WEIXIN
			this.$nextTick((res) => {
				const _this = this;
				// 获取目标元素的位置并滚动
				const query = uni.createSelectorQuery();
				query.select('#nav').boundingClientRect((rect) => {
					if (rect) {
						this.navHeight = rect.height
					}
				}).exec();
			})
			// #endif
		},
		computed: configMap({}, mapGetters(['isLogin', 'uid', 'userInfo'])),
		onPageScroll(e) {
			uni.$emit('scroll');
		},
		onReachBottom() {
			if (this.status == 'noMore') return;
			this.page.current_page++;
			this.UserArticleGetListFunc(this.cardUid);
		},
		methods: {

			plusHKT() {
				if (this.itemObj.promoter_type == 2) {
					uni.showToast({
						title: `该用户已经是会客厅权限，无需升级`,
						icon: 'none'
					})
					return;
				}
				cardBecomeService({
					uid: this.cardUid
				}).then(res => {
					uni.showToast({
						title: res.message || '暂无描述',
						icon: 'none',
						duration: 4000
					})
				}).catch(err => {
					uni.showToast({
						title: err || '暂无描述',
						icon: 'none',
						duration: 4000
					})
				})
			},

			getRecordListFunc() {
				getRecordList({
					card_id: this.options.id
				}).then(res => {
					this.viewUserList = res.data.data.map(item => {
						let avatar = '';
						if (item?.card?.avatar) {
							avatar = item?.card?.avatar
						} else if (item?.user?.avatar) {
							avatar = item?.user?.avatar
						} else {
							avatar = '/static/images/f.png'
						}
						return {
							...item,
							avatar
						}
					});
					this.day_total = res.data.day_total;
					console.log(this.viewUserList, 'viewUserList')
				})
			},
			toPageHome(index) {
				if (index == 0) {
					uni.navigateBack({
						fail(err) {
							console.log(err, "errerrerr")
							// this.$timer.toNavigation();
						}
					})
				} else {
					this.$timer.toNavigation();
				}
			},
			UserArticleGetListFunc(uid) {
				this.status == 'loading';
				UserArticleGetList({
					uid: uid,
					status: 1,
					limit: 10,
					page: this.page.current_page
				}).then(res => {

					// 判断是否有重复的，
					let list = res.data.data || [];
					if (this.articleList.length && list.length) {
						let rel = this.articleList.findIndex(item => item.id == list[0]['id']);
						if (rel >= 0) return;
					}

					let data = list.map((item, index) => {
						let obj = {
							show: 'none',
							...item,
							create_time: uni.$u.timeFormat(item.create_time, 'yyyy-mm-dd'),
						}
						if (index == 0) {
							obj.show = 'none'
						}
						return obj;
					});

					if (data.length < 10) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}

					this.articleList = [...this.articleList, ...data];

					this.page = {
						current_page: res.data.current_page,
						total: res.data.total
					}

				})
			},
			toPageSonShop() {
				uni.navigateTo({
					url: `/pages/extend/subShop/index?mid=${this.mer_id}`
				})
			},

			get_host_product: function() {
				let that = this;
				that.hotTitle = '';
				getProductHot(1, 6, 2, this.mer_id, 1).then(res => {
					that.$set(that, 'hostProduct', res.data.list);
				}).catch(err => {
					console.log(err);
				});
			},
			painterProgress(e) {
				if (e >= 1) {
					setTimeout(() => {
						this.$refs.cardPopupRef.open('center');
						uni.hideLoading();
					}, 500)
				}
			},
			painterSuccess(e) {
				this.placardImg = e;
			},
			preViewData() {
				let data = uni.getStorageSync('temporarily_my_card');
				let other = uni.getStorageSync('temporarily_my_card_other');
				this.itemObj.Occupation = data.Occupation || '';
				this.itemObj.avatar = data.avatar || '';
				this.itemObj.company_image = other.enterprise.img ? other.enterprise.img.join(',') : '';
				this.itemObj.company_info = other.enterprise.content;
				this.itemObj.demand = other.demand.gainDesc;
				this.itemObj.email = data.email;
				this.itemObj.follow_num = data.follow_num;
				this.itemObj.is_real = data.is_real;
				this.itemObj.is_share = data.is_share;
				this.itemObj.label = data.labelList ? data.labelList.join(',') : '';
				this.itemObj.max_edu = data.max_edu;
				this.itemObj.name = data.name;
				this.itemObj.old_home = data.old_home;
				this.itemObj.phone = data.phone;
				this.itemObj.position = data.company;
				this.itemObj.product_service = other.products.content || '';
				this.itemObj.product_service_image = other.products.img ? other.products.img.join(',') : '';
				this.itemObj.pv = data.pv;
				this.itemObj.qr = data.pr;
				this.itemObj.resident_address = data.arecList || '';
				this.itemObj.school = data.school || '';
				this.itemObj.social_duties = data.social_duties || '';
				this.itemObj.status = 4;
				this.itemObj.supply = other.demand.content || '';
				this.itemObj.supply_demand_image = other.demand.img ? other.demand.img.join(',') : '';
				this.itemObj.type = data.type;
				this.itemObj.type_info = data.type_info;
				this.itemObj.user_image = data.user_image;
				this.itemObj.user_info = data.user_info;
				this.itemObj.wechat = data.wxNumber || '';
				this.itemObj.uid = data.uid || '';
				this.itemObj.collect = data.collect || '';
			},

			closePopupImage() {
				this.$refs.cardPopupRef.close();
			},
		downloadBase64ImageToAlbum(base64Data) {
			// 检查 wx API 是否可用
			if (typeof wx === 'undefined') {
				console.error('当前环境不支持微信 API');
				uni.showToast({
					title: '当前环境不支持保存图片',
					icon: 'none'
				});
				return;
			}

			try {
				// 提取 Base64 内容
				const base64Content = base64Data.split(',')[1];

				// 将 Base64 字符串转换为 ArrayBuffer
				if (typeof wx.base64ToArrayBuffer !== 'function') {
					throw new Error('base64ToArrayBuffer API 不可用');
				}
				const buffer = wx.base64ToArrayBuffer(base64Content);

				// 创建临时文件路径
				if (!wx.env || !wx.env.USER_DATA_PATH) {
					throw new Error('无法获取临时文件路径');
				}
				const tempFilePath = `${wx.env.USER_DATA_PATH}/temp_image.png`;

				// 使用 wx.getFileSystemManager() 保存文件
				if (typeof wx.getFileSystemManager !== 'function') {
					throw new Error('getFileSystemManager API 不可用');
				}
				const fs = wx.getFileSystemManager();

				fs.writeFile({
					filePath: tempFilePath,
					data: buffer,
					encoding: 'binary',
					success: function() {
						console.log('临时文件保存成功:', tempFilePath);
						// 保存到相册
						if (typeof wx.saveImageToPhotosAlbum === 'function') {
							wx.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success: function() {
									console.log('图片已保存到相册');
									if (typeof wx.showToast === 'function') {
										wx.showToast({
											title: '保存成功',
											icon: 'success'
										});
									}
								},
								fail: function(err) {
									console.error('保存到相册失败:', err);
								}
							});
						}
					},
					fail: function(err) {
						console.error('文件保存失败:', err);
						if (typeof wx.showToast === 'function') {
							wx.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					}
				});
			} catch (error) {
				console.error('保存图片失败:', error);
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				});
			}
		},
			// 保存名片
			dowCard() {
				this.downloadBase64ImageToAlbum(this.placardImg);
			},
			tabsSelect(index) {
				this.current = index;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.$nextTick((res) => {
					const _this = this;
					// 获取目标元素的位置并滚动
					const query = uni.createSelectorQuery();
					query.select(`#id${index}`).boundingClientRect((rect) => {
						if (rect) {
							const scrollTop = rect.top;
							// 滚动到目标元素
							uni.pageScrollTo({
								scrollTop: scrollTop - _this.navHeight - 10,
								duration: 200
							});
						}
					}).exec();
				})
			},
			callClick(tag) {



				if (tag == '打电话') {


					if (this.options.mode != 'share') {
						if (!this.isLogin) {
							toLogin();
							return;
						}

						if (!this.isMycard) {
							this.$refs.createPopupRef.open('center');
							return;
						}

						if (this.itemObj.is_share == 2) { // 未交换名片
							this.$refs.exchangePopupRef.open('center')
							return;
						}

						if (this.itemObj.is_share == 3) {
							uni.showToast({
								title: '已向对方发起过申请,请耐心等待对方同意~',
								icon: 'none',
								duration: 4000
							})
							return;
						}
					}
					uni.makePhoneCall({
						phoneNumber: this.itemObj.phone
					})
					return;
				}
				if (tag == '加微信') {

					if (this.options.mode != 'share') {
						if (!this.isLogin) {
							toLogin();
							return;
						}

						if (!this.isMycard) {
							this.$refs.createPopupRef.open('center');
							return;
						}


						if (this.itemObj.is_share == 2) { // 未交换名片
							this.$refs.exchangePopupRef.open('center')
							return;
						}

						if (this.itemObj.is_share == 3) {
							uni.showToast({
								title: '已向对方发起过申请,请耐心等待对方同意~',
								icon: 'none',
								duration: 4000
							})
							return;
						}
					}

					if (!this.itemObj.wechat) {
						uni.showToast({
							title: '对方未填写微信号',
							icon: 'none',
							duration: 4000
						})
					};

					uni.setClipboardData({
						data: this.itemObj.wechat,
						success(res) {
							uni.showToast({
								title: '内容已复制',
								icon: 'none'
							})
						}
					})
					return;
				}
			},
			collectionClick(tag) {
				if (!this.isLogin) {
					toLogin();
					return;
				}
				if (!this.itemObj.id) return;

				uni.showLoading({
					title: '加载中...'
				})
				if (tag == '收藏') {
					this.cardRelationCreateFunc();
				} else {
					this.cardRelationDeleteFunc();
				}
				uni.hideLoading();
			},
			cardRelationCreateFunc() {
				cardRelationCreate({
					type_id: this.itemObj.id,
					type: 14
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					if (res.status == 200) {
						this.$set(this.itemObj, 'collect', 1)
					}
				})
			},
			cardRelationDeleteFunc() {
				cardRelationDelete({
					type_id: this.itemObj.id,
					type: 14
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					if (res.status == 200) {
						this.$set(this.itemObj, 'collect', 2)
					}
				})
			},

			previewImg(list, index) {
				uni.previewImage({
					urls: list,
					current: index
				})
			},

			cardDetailFunc(id) {
				cardDetail({
					id: id
				}).then(res => {
					this.cardUid = res?.data?.uid;
					this.UserArticleGetListFunc(this.cardUid);
					// 判断是否有子商城
					if (res.data.mer_id > 0 && this.hostProduct.length == 0) {
						this.mer_id = res.data.mer_id;
						this.get_host_product();
					}

					if (id) {
						this.itemObj = res.data;
						let obj = JSON.parse(JSON.stringify(res.data))
						this.$store.commit('SET_CardDetail', obj);
					} else {
						if (res.status == 200 && res.data) {
							this.isMycard = true;
							// 添加缓存记录
							uni.setStorageSync('myCardInfo', {
								is_card: true,
								item: res.data
							});
						} else {
							this.isMycard = false;
							// 添加缓存记录
							uni.setStorageSync('myCardInfo', {
								is_card: false
							});
						}

					}

					// 显示访问提示
					this.showVisitTooltip = true;
					// 3秒后自动隐藏
					setTimeout(() => {
						this.showVisitTooltip = false;
					}, 3000);
				})
			},
		toNewsDetail(item) {
			if (item.wx_url) {
				// 检查 wx API 是否可用
				if (typeof wx !== 'undefined' && typeof wx.openOfficialAccountArticle === 'function') {
					wx.openOfficialAccountArticle({
						url: item.wx_url, // 此处填写公众号文章连接
						success: res => {},
						fail: res => {
							console.error('打开公众号文章失败', res);
							uni.showToast({
								title: '打开文章失败',
								icon: 'none'
							});
						}
					})
				} else {
					console.log('当前环境不支持打开公众号文章');
					uni.showToast({
						title: '当前环境不支持打开公众号文章',
						icon: 'none'
					});
				}
			} else {
				uni.navigateTo({
					url: '/pages/extend/connection/new_desc?id=' + item.id
				})
			}
		},
			exchangeClick() {

				if (!this.isLogin) {
					toLogin();
					return;
				}

				if (!this.isMycard) {
					this.$refs.createPopupRef.open('center');
					return;
				}

				if (this.itemObj.is_share == 3) {
					uni.showToast({
						title: '已向对方发起过申请,请耐心等待对方同意~',
						icon: 'none',
						duration: 4000
					})
					return;
				}

				uni.navigateTo({
					url: '/pages/extend/connection/send_apply'
				})
			},
			tabsClick(tabs) {
				if (tabs == '名片卡') {
					if (!this.placardImg) {
						this.isCanvasToTempFilePath = true;
						uni.showLoading({
							title: '生成中...'
						})
					} else {
						this.$refs.cardPopupRef.open('center');
					}
					return;
				}


				if (tabs == '存入手机') {

					if (this.options.mode != 'share') {
						if (!this.isLogin) {
							toLogin();
							return;
						}

						if (!this.isMycard) {
							this.$refs.createPopupRef.open('center');
							return;
						}
						if (this.itemObj.is_share == 2) { // 未交换名片
							this.$refs.exchangePopupRef.open('center')
							return;
						}

						if (this.itemObj.is_share == 3) {
							uni.showToast({
								title: '已向对方发起过申请,请耐心等待对方同意~',
								icon: 'none',
								duration: 4000
							})
							return;
						}
					}
					uni.addPhoneContact({
						photoFilePath: this.$timer.ensureUrl(this.itemObj.avatar), // 头像
						firstName: this.itemObj.name,
						mobilePhoneNumber: this.itemObj.phone,
						organization: this.itemObj.position.company_name,
						title: this.itemObj.position.position,
						weChatNumber: this.itemObj.wechat,
						workAddressCity: this.itemObj.position.address + this.itemObj.position.address_detail,
						success: function() {
							console.log('success');
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
						},
						fail: function(err) {
							// uni.showToast({
							// 	title: '取消保存',
							// 	icon: 'none'
							// })
						}
					});
					return;
				}
			},
			toCreateMpPage() {
				if (!this.isLogin) {
					toLogin();
					return;
				}
				this.$refs.createPopupRef.close();
				uni.navigateTo({
					url: '/pages/extend/connection/create'
				})
			},
			tabChange: function(e) {
				this.current = e.detail.index
			},
		},
	// #ifdef MP
	onShareAppMessage: function() {
		// 检查 wx API 是否可用
		if (typeof wx !== 'undefined' && typeof wx.showShareMenu === 'function') {
			try {
				wx.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})
			} catch (error) {
				console.error('显示分享菜单失败:', error);
			}
		}
		return {
			title: `${this.itemObj.name} / ${this.itemObj.position.position}\r\n${this.itemObj.position.company_name}`,
			path: `pages/extend/connection/index_desc?id=${this.itemObj.id}&mode=${this.itemObj.uid == this.uid ? 'share' : 'card'}&uid=${this.uid}`,
		}
	},
		onShareTimeline: function() {
			return {
				title: `${this.itemObj.name} / ${this.itemObj.position.position}\r\n${this.itemObj.position.company_name}`,
				query: {
					id: this.itemObj.id,
					mode: this.itemObj.uid == this.uid ? 'share' : 'card',
					uid: this.uid
				},
				imageUrl: ''
			}
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border: 1px solid #DCDCDC;
		padding: 3px 7px;
		opacity: 0.8;
	}

	.news-list {
		margin-top: 30rpx;
	}

	.news-item {
		margin-bottom: 20rpx;
	}

	.news-content {
		display: flex;
		gap: 20rpx;
	}

	.news-cover {
		width: 200rpx;
		height: 150rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.news-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.news-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.news-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.4;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.news-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.news-label {
		font-size: 24rpx;
		color: #2965FF;
		background-color: rgba(41, 101, 255, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}

	.news-time {
		font-size: 24rpx;
		color: #999;
	}

	.news-status {
		display: inline-block;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
		font-weight: normal;

		&.status-pass {
			color: #1BA035;
			background-color: rgba(27, 160, 53, 0.1);
		}

		&.status-pending {
			color: #A7ADB1;
			background-color: rgba(167, 173, 177, 0.1);
		}

		&.status-reject {
			color: #FF0000;
			background-color: rgba(255, 0, 0, 0.1);
		}

		&.status-draft {
			color: #FBC118;
			background-color: rgba(251, 193, 24, 0.1);
		}
	}

	/* 侧滑按钮样式 */
	::v-deep .uni-swipe-action__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.status-tabs {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.status-tab {
		padding: 10rpx 20rpx;
		border: 1rpx solid #BBBBBB;
		border-radius: 6rpx;
		font-size: 28rpx;
		color: #333;
		cursor: pointer;

		&.status-tab-active {
			background-color: #00009E;
			color: white;
		}
	}

	.box-item-card {
		border-radius: 6rpx;
		margin: 10rpx;
		padding-top: 0rpx;
		padding-bottom: 0rpx;
		width: fit-content;
		padding-left: 10rpx;
		padding-right: 10rpx;
		background-color: #EBEBEB;
		color: #666666;
		font-size: 24rpx;
	}

	.box-card-saveBtn:active {
		opacity: .5;
	}

	.box-card-saveBtn {
		margin-top: 20rpx;
		text-align: center;
		width: 180rpx;
		height: 66rpx;
		background-color: #00009E;
		color: white;
		line-height: 66rpx;
		border-radius: 6rpx;
	}

	// .box-card-pop {
	// 	box-sizing: border-box;
	// 	height: auto;
	// 	width: 90vw;
	// 	background-color: white;
	// 	border-radius: 10rpx;
	// }

	.box-tabs-txt {
		color: #000000;
		font-size: 30rpx;
	}

	.box-tabs {
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		font-size: 32rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		opacity: 1;
		padding-bottom: 20rpx;
	}

	.box-tabs-fixed {
		padding: 10rpx 20rpx 0rpx 20rpx;
		top: 0;
		position: fixed;
		width: 100%;
		background-color: white;
		height: auto;
	}

	.nav-scroll-view {
		width: 100%;
		white-space: nowrap;
		overflow: visible;
	}

	.nav-items-container {
		display: flex;
		padding: 10rpx 10rpx 20rpx 10rpx;
	}

	.nav-item {
		flex-shrink: 0;
		margin-right: 30rpx;
		position: relative;
		padding-bottom: 20rpx;
	}

	.indicator-image {
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 20;
		height: 30rpx;
	}

	.box-title-txt {
		font-weight: bold;
		font-size: 36rpx;
		box-sizing: border-box;
	}

	.box-card-jiaoh:active {
		opacity: .6;
	}

	.box-card-jiaoh {
		margin-top: 60rpx;
		width: 66vw;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		color: white;
		background-color: #00009E;
		border-radius: 10rpx;
	}

	.exchangePopupRef {
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		width: 80vw;
		height: 800rpx;
		background-color: #FFFFFF;
		padding-bottom: 30rpx;
	}

	.protoButton {
		background: none;
		border: none;
		outline: none;
		padding: 0;
		margin: 0;
		font: inherit;
		color: inherit;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		display: inline-block;
	}

	.image-container {
		cursor: pointer;
	}

	.image-container img {
		width: 100%;
		max-width: 300px;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.8);
		/* 半透明背景 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		/* 确保模态框在最上层 */
	}

	.modal-image {
		max-width: 100%;
		/* 适应屏幕宽度 */
		max-height: 90%;
		/* 适应屏幕高度 */
	}

	.box-create {
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		bottom: 220rpx;
		right: 0rpx;
		position: fixed;
		width: 240rpx;
		height: 60rpx;
		background-color: #00009E;
		color: white;
	}

	.box-intro {
		letter-spacing: 4rpx;
		font-size: 32rpx;
		color: #666;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 18rpx;
		background-color: #FFFFFF;
		width: 95%;
		margin: 20rpx;
	}

	.box-bg-title {
		background: linear-gradient(to bottom, #CF9B62, #FFFFFF);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.box-bg-img-2-right {
		margin-left: auto;
		margin-right: auto;
	}

	.box-bg-img-2-left {
		padding: 40rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		width: 70%;
		// background-color: #374E7C;
		height: 100%;
	}

	.box-bg-img-2 {
		display: flex;
		align-items: center;
		// background-color: #282C35;
		width: 100%;
		height: auto;
		border-radius: 20rpx;
		background-size: 100% 100%;
		background-image: url('https://yjgs.jsonbug.com/test/bag1.png');
	}

	.box-miaos {
		font-size: 32rpx;
		line-height: 46rpx;
		color: #666666;
		border-radius: 18rpx;
		margin: 20rpx;
		width: 95%;
		background-color: white;
	}

	.box-item {
		border-radius: 60rpx;
		line-height: 60rpx;
		width: fit-content;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 60rpx;
		background-color: #F4F5FA;
	}

	.box-img-text {
		z-index: 1;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		color: white;
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		// height: 120rpx;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(28, 32, 37, .65));
	}

	.box-collect {
		width: 120rpx;
		height: 120rpx;
		background-color: #FFEDCA;
		position: absolute;
		right: 0rpx;
		top: -6rpx;
		border-top-left-radius: 60px;
	}

	.box-bg-img {
		height: 860rpx;

		background-size: 100% 100%;
		border-radius: 18rpx;
	}

	.box-main {
		background-color: #F4F5FA;
	}

	.box-mp {
		padding-bottom: 30rpx;
		border-radius: 16rpx;
		width: 95%;
		background-color: #FFFFFF;
		height: auto;
		margin: 20rpx;
	}

	.box-tabber-c {
		border-radius: 90rpx;
		font-weight: bold;
		color: white;
		text-align: center;
		line-height: 120rpx;
		width: 220rpx;
		height: 100%;
		background-color: #00009E;
	}

	.box-tabber-c:active {
		opacity: .5;
	}

	.box-tabber {
		background-color: #FFFFFF;
		padding-right: 40rpx;
		padding-left: 40rpx;
		justify-content: space-between;
		display: flex;
		align-items: center;
		border-radius: 260rpx;
		bottom: 50rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		width: 93%;
		position: fixed;
		height: 120rpx;
	}

	.avatar-stack {
		display: flex;
		padding-right: 10rpx;
	}

	.stacked-avatar {
		width: 46rpx;
		height: 46rpx;
		border-radius: 50%;
		border: 2rpx solid #ffffff;
		margin-left: -20rpx;

		&:first-child {
			margin-left: 0;
		}
	}

	.avatar-stack-container {
		position: relative;
	}

	.visit-tooltip {
		z-index: 99999;
		position: absolute;
		top: -75rpx;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(90deg, #0808D8, #2965FF);
		color: white;
		padding: 8rpx 20rpx;
		border-radius: 8rpx;
		white-space: nowrap;
		display: flex;
		align-items: center;
		animation: fadeInOut 3s ease-in-out forwards;

		// 添加小三角形
		&::after {
			content: '';
			position: absolute;
			bottom: -16rpx;
			left: 50%;
			transform: translateX(-50%);
			border-left: 12rpx solid transparent;
			border-right: 12rpx solid transparent;
			border-top: 16rpx solid #0808D8; // 使用渐变色的起始颜色
		}

		.fs-24 {
			margin-right: 6rpx;
		}

		.fs-32 {
			color: #FBC11A; // 数字使用突出的颜色
			font-weight: bold;
		}
	}

	@keyframes fadeInOut {
		0% {
			opacity: 0;
			transform: translate(-50%, 10rpx);
		}

		10% {
			opacity: 1;
			transform: translate(-50%, 0);
		}

		70% {
			opacity: 1;
			transform: translate(-50%, 0);
		}

		100% {
			opacity: 0;
			transform: translate(-50%, -10rpx);
		}
	}
</style>